<template>
    <view class="card" :style="{ borderRadius ,...props.customStyles}">
        <view v-if="titleBarStyle === 'icon'" class="card__bar card__bar--icon">
            <view class="card__title"
                :style="{ fontSize: titleBarStyles.fontSize, fontWeight: titleBarStyles.fontWeight }">
                {{ titleBar.title }}
                <view class="card__title--arrow">﹥</view>
            </view>
            <view class="card__subtitle" :style="{ fontSize: titleBarStyles.subTitleFontSize }">
                {{ titleBarStyles.subtitle }}
            </view>
        </view>
        <view v-if="titleBarStyle === 'text'" class="card__bar">
            <view class="card__title"
                :style="{ fontSize: titleBarStyles.fontSize, fontWeight: titleBarStyles.fontWeight}">
                {{ titleBar.title }}
            </view>
            <view class="card__subtitle card__subtitle--text" :style="{ fontSize: titleBarStyles.subTitleFontSize }">
                {{ titleBarStyles.subtitle }}
            </view>
        </view>
        <view v-if="titleBarStyle === 'slot'">
            <slot name="titleBar"></slot>
        </view>
        <view class="card__content" v-if="titleBarStyle === 'icon'">
            <slot name="content"></slot>
        </view>
        <view class="card__content card__content--default" v-else :style="{ padding, borderRadius, ...getBg }">
            <slot name="content"></slot>
        </view>
    </view>
</template>

<script setup lang="ts">
    import {
        computed,
    } from 'vue';
    import {
        CardProps,
        defaultCardProps
    } from '@/props.ts';
    const props = withDefaults(defineProps<CardProps>(),
        defaultCardProps
    )

    // 合并titlebar对象
    console.log(11111, props)
    const titleBarStyles = computed(() => ({
        ...defaultCardProps.titleBar(),
        ...props.titleBar,

    }));

    // 计算圆角值
    const borderRadius = computed(() => {
        let str = '';
        props.radius.split(',').forEach((item, index) => {
            str += `${item}rpx`;
            if (index !== props.radius.split(',').length - 1) {
                str += ' ';
            }
        });
        return str;
    });
    // 背景色设置
    const getBg = computed(() => {
        if (props.background.startsWith('http')) {
            return `background-image:url(${props.background});background-size:cover;`;
        } else if (props.background.startsWith('/')) {
            return `background-image:url('${props.background}');background-size:cover;`;
        } else {
            return `background:${props.background}`;
        }
    });
</script>

<style lang="scss" scoped>
    .card {
        width: 100%;
        box-sizing: border-box;
        border-radius: 20rpx;
        overflow: hidden;

        &__bar {
            @include flex-center;
            align-items: stretch;

            &--icon {
                background-color: #fff;
            }
        }

        &__title {
            font-weight: bold;
            padding: 20rpx;

            @include flex-center;



            &--arrow {
                border-radius: 50%;
                width: 25rpx;
                height: 25rpx;
                margin-left: 10rpx;
                background-color: #7d6ff4;
                @include flex-center;
                padding-bottom: 2px;
                box-sizing: border-box;
                font-size: 25rpx;
                color: #fff;
            }
        }

        &__subtitle {
            flex: 1;
            background-image: url("/static/test.jpg");
            @include flex-center;

            color: #56589e;

            &--text {
                background: none;
                color: #a0a2a9;
                display: flex;
                justify-content: flex-end;
            }
        }

        &__content {
            background-color: #fff;
            border-radius: 25rpx;

            &--default {
                overflow: hidden;
            }

        }

    }
</style>